<template>
  <Header class="header">
    <div class="header-left">
      <span class="header-logo"></span>
      <span class="header-title">小仓鼠</span>
    </div>
    <div class="header-right">
      <span class="right-item">
        <span class="label">当前所属平台：</span>
        <span class="label-text">{{ platName || "--" }}</span>
      </span>
      <span class="right-item">
        <span class="label">商家账号：</span>
        <span class="label-text">
          <a-select
            v-model:value="account"
            style="width: 170px"
            :options="options"
            @change="handleChange"
          ></a-select>
        </span>
      </span>
      <span class="right-item">
        <a-avatar :src="avatarSrc">
          <template #icon>
            <UserOutlined />
          </template>
        </a-avatar>
        <span class="label-name">{{ userName }}</span>
      </span>
    </div>
  </Header>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from "vue";
import { Layout } from "ant-design-vue";
import { SelectTypes } from "ant-design-vue/es/select";
import { UserOutlined } from "@ant-design/icons-vue";

const { Header } = Layout;
export default defineComponent({
  components: { Header, UserOutlined },
  setup() {
    const options = ref<SelectTypes["options"]>([
      {
        value: "123",
        label: "Jack"
      },
      {
        value: "456",
        label: "Lucy"
      }
    ]);
    const userInfo = reactive<{
      account: string;
      platName: string;
      avatarSrc: string;
      userName: string;
      platAccount: string | number;
      userId: string | number;
    }>({
      account: "123",
      platName: "",
      platAccount: "",
      avatarSrc: "",
      userName: "",
      userId: ""
    });
    const handleChange = (value: string) => {
      console.log(`selected ${value}`);
    };

    return {
      options,
      handleChange,
      ...toRefs(userInfo)
    };
  }
});
</script>
<style lang="less" scoped>
@import "index.less";
</style>
